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Unit objectives 


* Describe how to create tabs on a coach 
e Enhance coaches by applying a theme 
° Explain how to create a reusable View 
° Describe how to create a snapshot 

¢ Export your process application 

° Share your assets by using a toolkit 

° Conduct a Playback session 
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After completing this unit, you should be able to: 
e Describe how to create tabs on a coach 

e Enhance coaches by applying a theme 
° Explain how to create a reusable View 
e Describe how to create a snapshot 

e Export your process application 

e Share your assets by using a toolkit 

e Conduct a Playback session 
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Playback 1: Enhancing coaches 
° Itis your chance to show off all the new features that you built into 
your coaches 


° Demonstrate how each coach looks to the different participants in 
your process 


¢ This Playback garners intense scrutiny 


° Before you enter this Playback session, make sure that no regression 
errors occur 


¢ Ensure that all the coaches are functioning correctly and that this 
Playback shows off the good results 
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This stage of the playback is your chance to show off all the new features that you built into your 
coaches. Log on to the process portal and demonstrate how each coach looks to the different 
participants in your process. This playback garners intense scrutiny. Before you enter this 
playback session, make sure that no regression errors occur; ensure that all the coaches are 
functioning correctly, and this playback shows off the good results. 


Business users always demand heavy user interface (Ul) requirements. Traditionally, it is a 
struggle between developers and project management. By debating the compromises to the UI, 
consensus can be built around what is necessary to help participants complete their tasks in the 
least amount of time in the process. Compare this approach to spending a tremendous amount of 
time to create a complex UI screen, which might hold little business value. 
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Key concepts in this unit 
¢ Playback 1: Enhancing coaches: Show off all the new features that 
you built into your coaches 


° Coaches: The user interfaces for human services, and composed of 
HTML, JavaScript, and CSS 


= The three elements control the content, functions, and presentation of every 
web page 


° Theme: Theme determines the global appearance of a page 
= The purpose of theme is to ensure visual consistency 


= Themes affect the navigational structure, the banner, the colors, fonts, and 
other visual elements of a page 


* Views: Reusable assets that can be shared with multiple coaches or 
even multiple process applications 


Playback 1: Enhancing coaches 
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Topics 


¢ Enhancing coaches 

° Views 

° Theme support 

* Conducting the Playback session 
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Enhancing coaches 


Playback 1: Enhancing coaches © Copyright 18M Corporation 2018 


After modeling the basic coaches and ensuring that the data is flowing in the process, it is time to 
revisit the coaches that were created during this Playback. Now is the opportunity to add 
functions, interaction, stylization, menus to select from, and all the other user interface 
enhancements necessary for users to complete their tasks. 

This portion of the Playback usually receives the highest scrutiny, so take enough time to meet 
the business requirements, but balance this time with the overall project timelines. Avoid adding 
extra functions when it does not provide value. This unit focuses on using controls that are 
included in the IBM 
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Basics of coach enhancement 


* Coaches are made of three things: 
= HTML controls the content of the page (divs, spans, inputs, and other tags) 
= JavaScript controls the interactive functions of the page 
= Cascading stylesheets (CSS) control the visual style of the page 


All of the following tasks can be accomplished: 
= Build custom HTML elements and controls 


= Match a corporate color scheme or existing website layout through custom 
css 
= Alter control or page functions with JavaScript 


° Any page requirement can be fulfilled 
= If it can be built and shown in a browser, it can be done with a coach 


Playback 1: Enhancing coaches © Copyright 18M Corporation 2018 


Coaches use the same technology as any web development platform to serve web content to 
users. Coaches are composed of HTML, JavaScript, and CSS. The three elements control the 
content, functions, and presentation of every webpage. 


Coaches are made of HTML divisions and spans that control the structure of the page. The 
elements contain controls and labels. The stock JavaScript and CSS files are linked through 
<include> elements in the HTML and served from the IBM Business Automation Workflow. 


Although the Views in coaches come preinstalled with CSS and JavaScript to control the stock 
functions, any modification from the stock can be accomplished. That includes creating custom 
HTML controls from scratch, creating custom stylesheets, and changing or adding JavaScript 
functions. 


Some organizations might be hesitant to use coaches because they are unaware of the 
capabilities, but the use of coaches to create a web page has no limitations. If it can be built and 
shown in a browser, it can be done with a coach. The advantage is that the rapid application 
development tools allow developers to create the web page quickly, and connecting data to the 
fields on the page is much quicker than using external web pages. Other considerations like 
security, sessions, cookies, and the back-end considerations are taken care of for the coach 
developer 
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Implementing a select control (1 of 2) 


e You can use a select control to limit input values in a specific 
control. 


() 
Retin . 
ttre tacng Form | Nena vars O =) 
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You can use a Select control to limit input values in a specific control. Until now, a user was able 
to insert any type of data into an input box. One way to standardize the input data is to provide 
options for a user to choose from. A user can choose among many different options from a list of 
choices on acoach. The intent is to limit the values that a user can input for a certain control. The 
solution that is provided in IBM Business Automation Workflow is to use the select control that is 
provided in the UI Toolkit. This default control is a setup that uses an Ajax service with specific 
inputs and outputs to feed the list in the control object. 


Another common approach is to provide a selection of options for the user to choose from. The 
control itself is bound to a variable, similar to any input. The selection data can come from a list 
that is retrieved from a database. 


The easiest way to accomplish a select control in a coach is to store the dynamic data in a list of 
String or a list of name-value pair. In the previous step, the coach retrieves the data with an SQL 
integration service that was created in Playback and saves the data in a list object. 


Drag the integration service onto the palette and hook up the flows. Map the output of the 
integration service to a local variable. The variable feeds the control on the coach. 
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Implementing a select control (2 of 2) 
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The next step is to identify the input control that was created in Playback that must be changed 
into a select control. At times, by using a toolkit that comes from other developers, the 
implementation is quicker. The default select control is easily configured to show the list of 
options to a user. As a developer, you have plenty of options to choose from, including building 
your own View select control. Views are explained in more detail later in this unit. 


To accomplish this change, in the View: option, the developer clicks Select to choose the Single 
Select control from the system toolkit to replace the default Text view. The image on the palette 
changes to reflect the new look of the select box 
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Configuring the select list 


Requisition Details Position Details Recruiting Details Compensation Details Department Details + 


Department Details 
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The final step is to set what values are displayed to the user in the control, and what values are 
stored in the bound variable when the user makes the selection. The binding on the Properties > 
Configuration tab sets the list that users can select from. When users select their choice, the 
selection is a member of the type of variable that is configured as the binding variable. The 
variable is stored in the variable that is bound to the control on the Properties > General tab. 


If the binding is a list of name-value pair, the selected item must be a simple name-value pair 
variable. If the binding is a list of String, the selected item must be a simple String variable. 
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Views 


Playback 1: Enhancing coaches © Copyright 18M Corporation 2018 
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Views 


° Beginning with version 19.0.0.1, Coach Views are known as Views. 


° Views are reusable assets that can be shared with multiple coaches 
or even multiple process applications 


° Views and coaches can share parts of their user interface with other 
Views and coaches 


¢ In general, create highly reusable Views in toolkits and more 
specialized Views in process applications 
= If the View is in a toolkit and then someone edits it, the changes apply to 
all instances of the View in all applications that use that toolkit 
= You cannot directly edit the definition of the View from within the parent 
coach or View 
= Instead, you must first open the View definition before you can change it 
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Beginning with version 19, Coach Views are known as Views. 


Views are reusable assets (or coach controls) that can be shared with multiple coaches or even 
multiple process applications. For example, after developers apply the CSS classes and achieve 
the style that they want for a coach, they can create a custom View. By moving the class into a 
View, the class can now be a shared asset. 


Because Views are reusable, Views and coaches can share parts of their user interface with 
other Views and coaches. For example, suppose that you create a coach with a View that 
contains a set of address fields. If you create a second coach that needs address fields, you can 
reuse the View from the first coach. In both cases, the coach is using an instance of the View. 
You can edit the properties of each instance independently. For example, changing the label of 
one View instance does not change the label of the other. Both instances of the View use a 
reference to point to the View definition. This approach means that if the View definition changes, 
you can see that the change is reflected in the instances of the View. 


You can create a View in the process application or in a toolkit. In general, you create highly 
reusable Views in toolkits and more specialized Views in process applications. Choosing the 
process application means that you can reuse it only within the process application. However, it 
also means that if someone edits the View, the changes apply to the instances of the View in the 
process application. If the View is in a toolkit, when someone edits it, the changes apply to all 
instances of the View in all applications that use that toolkit. Because editing a coach definition 
can affect many instances, be careful in your changes. For example, deleting a content box in the 
View definition means that coaches or Views that contain instances of that View cannot display 
the content. 


You cannot directly edit the definition of the View from within the parent coach or View. Instead, 
you must open the View definition first before you can change it. 
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Create a View 


° Create a View through the User Interface category in the library. 


° To create a custom View, the developer clicks the (+) plus icon next 
to the User Interface category in the library in Process Designer. 


After naming the View, the developer is directed to the View 
definition page. 
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To create a custom View, the developer clicks the (+) plus icon next to the User Interface 


category in the library in the Web Process Designer. After naming the View, the developer is 
directed to the View definition page. 


You can also create a View in the client-side human service designer. 
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Create a View 


New View 


Views are reusable user interface components, which can be simple = 
widgets or represent complex business objects. =f 


Name: [view | 
@ Start with blank view 
O Start with a grid: im Single Column v 
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FINISH CANCEL 
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Templates are an ideal way to create a standardized look across multiple Views. 
A template is a View that someone marks as being usable as a template in its Overview page. 


Users can then select the template when they are creating Views. The new Views have the 
content of the template as base content to which the users can then add content. For example, 
you create a View that has the company logo and name in a banner area and a content box as a 
placeholder for other content. When you use this View as a template, you can then select it when 
you are creating another View. In the new View, the banner area is defined in the template along 
with an area for content. Other users can also use the template when they are creating Views, 
and the template provides a consistent look across the new Views. Because templates are Views, 
you can also drop them onto coaches. For example, if you have a template that has a common 
banner, you can drop it onto a coach so that the coach has the common banner 
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View definition page 
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When developers create a View or open an existing View to edit it, they see the following sections 


available: 
¢ Overview 


This page displays the View name, information about the View, the images that are used to 


represent the View during design time, and how the View is used. You can also tag your 
View to make it easier to find in the library and on the palette. 
* Behavior 


This page displays the scripts and CSS files that are contained in the View. The Behavior 


page is also where you define event handler code. The event handlers are the entry points 


for the code of the View. While the View might reference supporting JavaScript files, the 


event handlers contain the functions that the IBM Business Automation Workflow framework 


Calls. 
¢ Variables 


This page displays the business data binding, configuration options (which includes Ajax 
services), and localization resources that are available to the View or what the View uses. 
« Layout 


This page displays the Views and controls that are contained within the View and their 
relative positions. The layout page also displays the palette, which contains items that you 
can add to the View. These items consist of Views, which are categorized with tags, 
advanced items, and variables. 
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Defining View behavior 


e In the Behavior section of the View definition, you include 
reusable scripts or add inline JavaScript or CSS code. 
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In the Behavior section of the View definition, you include reusable scripts or add inline 
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JavaScript or CSS code to the View. You can also define events. 


To define the behavior for the View in the Behavior page, you add existing script files from the 
library through the Included Scripts section. You add CSS code and JavaScript to the View 
definition through the Inline CSS and Inline JavaScript sections. In general, you include scripts for 
reusable code and the inline options for JavaScript and CSS code that is not reusable. 


Course materials may not be reproduced in whole or in part without the prior written permission of IBM. 


© Copyright IBM Corporation 2019 


16 


ZB828 Unit 7 Transcript 


Slide 17 


UI Toolkit 


° Aset of controls for designing applications that can be run on multiple 
device types, such as mobile and desktop devices 


¢ All the Views in the UI Toolkit are suitable for use on both desktop and 
mobile devices 


¢ Each control in the UI Toolkit consists of a View that points to a specific 
set of files: 
= A JavaScript file that provides the behavior of the control 
= Image files to represent the control on the palette and on the canvas 
= Apreview JavaScript file that shows a preliminary view of the View when it is 
dropped on the coach editor palette 
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The UI toolkit makes available a set of controls for designing applications that can be run on 
multiple device types, such as mobile and desktop devices. All the Views in the UI Toolkit are 
suitable for use on both desktop and mobile devices. 

Each control in the UI Toolkit consists of a View that points to a specific set of files: 

A JavaScript file that provides the behavior of the control 

Image files to represent the control on the palette and on the canvas 

A preview JavaScript file that shows a preliminary view of the View when it is dropped on the 
coach editor palette. 
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Theme support 
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Create custom theme 


e Atheme consists of a set of theme definitions, dynamic stylesheets, and 
generated CSS that you can apply to a process application or toolkit 


« Anew process application, by default, uses the Classic Theme 


* Classic Theme contains all of the definitions that the IBM Business 
Automation Workflow responsive controls use 


* Theme support is based on an open source CSS precompiler called LESS 


e An Admin command can be used to update the appearance of a deployed 
process app without changing and redeploying the process app 
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To create a theme: 


1. Inthe Process Designer, click Create New button and select Theme or in the library, click the 
(+) plus sign in the User Interface category and then select Theme. 

2. Inthe New Theme window, type the name of the new theme. 

3. Select whether you want to copy an existing theme from the current project or dependent 
toolkit or import a theme. After you click Finish, the editor opens the new theme. 

4. Inthe theme editor, assign values to theme variables. The value can be a specific value, a 
formula, another variable, or a combination of these types. For example, @bpm-neutral: 
#586464 defines the value to a specific color while @bpm-link-color: @bpm-color-primary; 
defines the value with the value of another variable. In the Design page, change the value for 
one or more variables. 
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Create custom theme 


e Use the Classic Theme as your starting point to create a custom theme 
and to use any of the UI controls in your process application 


¢ Extend your theme by adding custom variables and modifying the 


system variables 
New Theme 
Atheme sets the visual style of the coaches within a process 
application or toolkit. A theme can also apply to a portal in Process 


Portal. 


Name: [Theme ] 


@ Copy an existing theme 
[ Classic (System Data) v] 
© Importa theme file 
Browse... No file selected. 
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When you create a custom theme, you can use the Classic Theme as your starting point . You 
can then extend your theme by adding custom variables and modifying the system variables 
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WYSIWYG Theme Editor: Create and edit theme (1 of 3) 
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The WYSISYG Theme Editor allows you to view how the controls look using various style 
changes in real time. 
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WYSIWYG Theme Editor: Create and edit theme (2 of 3) 
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Many variables have a swatch that you can click and then choose a value from a picker. The 
example controls update to display the new values. If you hover over a control, you can see the 
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specific variables that affect that control and its current values. 
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WYSIWYG Theme Editor: Create and edit theme (3 of 3) 
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You can also select the preferred font style. 


© Copyright IBM Corporation 2019 
Course materials may not be reproduced in whole or in part without the prior written permission of IBM. 


ZB828 Unit 7 Transcript 


Slide 24 


Applying custom theme to process apps 


* Theme is set in the Process App Settings of a Process App or Toolkit 


° The theme setting affects all Views, including the Views that come 
from included toolkits activities 
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Theme is set in the Process App Settings of a Process App or Toolkit. If you change back to 
using the Classic Theme, the same coach reverts to the default Classic Theme Colors. 
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Conducting the Playback 
session 


Playback 1: Enhancing coaches © Copyright 18M Corporation 2018 


This Playback is your chance to demonstrate everything that was created thus far: process flow 
variables that drive decision gateways, tasks that are created and assigned to the right teams, 
and correct task routing. This Playback also demonstrates that the process is following the 
correct path 
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Playback 1: Business data and services 


Playback 


° The goal is to 
demonstrate data flows 
from one coach to 
another, and from one 
task to another inside 
the process 


All data is bound on the 
coaches, and if the 
same data is shared 
across multiple tasks, 
Playback participants 
can see the data move 
through the different 
activities 
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A Playback is a focused demonstration of a partially implemented process application, which is 
delivered to the business and IT communities for discussion, consensus-building and approval. 


As you recall, the goal of Playback 1 is to demonstrate data flows from one coach to another, and 
from one task to another inside of the process. All data is bound on the coaches, and if the same 
data is shared across multiple tasks, Playback participants can track the data when it moves 
through the different activities. 


Playback 1: Focus on user interface design and implementation 
- Data model and process flow implementation 
- Human service or coach design, and data mapping 
- Business rules, process flow control implementation 
At times, the project team may make specific requests for demonstrations. For instance, if the 


project team is tasked with demonstrating the tracking of work while the process is running, you 


would highlight the priority and status of the work items as they are active in the process. 
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Expose a process to a team 


° Create an instance of the process before you demonstrate it 

° Create an instance of a process application to a team (All Users) by 
using Expose to start 
= Click the Overview Tab on the Process App 
= For Expose to start, choose a team 


v Exposing 


Expose business data Select New. x 


Expose performance metncs Select News x 
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Before developers demonstrate the process, they create an instance of the process. This task is 
accomplished when they expose the process application to a team. A developer verifies the 
exposure settings on the Process App Settings Overview page. This menu has other functions 
that pertain to process applications and the processes and services that are contained within. 

e Go to the Overview tab of the process, and next to the Expose to start option, click Select 


to select a team that has access to start this process. 


e The quickest way to demonstrate the process is to expose the process to the All Users team 


so any participant with a valid account can start the process. 
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Creating snapshots: workflow center 


{1} 
Process Apps e’ Toolkits Servers Admin 


Set By Receetly Updated ~~) A | We Emmctes | Archies 


iS HR Recruitment Processes (HRR) (2) 


#f Hiring Sample (HSS) 


= 


Process Apps Toolkits Servers Admin ? [Qvecccn 


*C HR Recruit Processes (HRR) 
| Snapshots | 3). Manage Governance 
Som Snapshots By. Cate ~) All | Installed | Arctoweg % Open in 
© Current : 
naeged on S276 v 


€d Playback 1 (P1) ~ Mew 


Playback 1: Enhancing coaches © Copyright 18M Corporation 2018 


Recall that a snapshot captures the state of the library items within a process application or toolkit 
at a specific point in time. Snapshots usually represent a milestone or are used for Playbacks or 


for installation. As you recall, you took a snapshot at the end of Playback 0 within Process 
Designer. 


This time, you create a snapshot of a process application in the workflow center, the developer 
completes the following steps: 
1. Click the Process Apps tab to access the process application repository. 
2. From the repository, click the process application to get to the management interface. 
3. Inthe process application management interface, click the Snapshots tab. 
4. From this interface, click the Create New Snapshot option on the right to create a 
snapshot for the process application. 


Any snapshot that is created for a process application is listed in the snapshot list for the process 
application in both the workflow center and the Process Designer for the application. 
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Guidelines for using snapshots 


° Snapshots can take up large amounts of space in a database 
» Agree on intervals in your organization and take snapshots at agreed-upon 
milestones 


° Define a meaningful naming convention for snapshots and use that 
naming convention for all projects 


° Work closely with IBM Business Process Manager administrators to 
come up with a snapshot deployment and activation plan 


D> Vnteltien Biraes art Werinags By Tue 


@ Baseline (B) ~ [Econ] 
02 
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The following list contains some guidelines for using snapshots for a process application: 

¢ Snapshots can take up large amounts of space in a database, so create snapshots 
that are targeted to important phases in development. Agree on intervals in your 
organization and take snapshots at agreed-upon milestones. 

¢ Define a meaningful naming convention for snapshots and use that naming 
convention for all projects. 

¢ Work closely with IBM Business Automation Workflow administrators to come up with 
a snapshot deployment and activation plan. Administrators and developers with 
administration privileges are the team members who can deploy snapshots to other 
environments. 


Once you create a snapshot, you can export your process application. You cannot export the tip 
so each time you want to export your process application, you need to create a snapshot. 
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Toolkits 


& A toolkit is a container where artifacts can be stored for reuse by 
process applications or other toolkits. 


& You can create toolkits to enable Process Designer users to share 
library items across process applications. 


& Process applications can share library items from one or more 
toolkits, and toolkits can share library items from other toolkits. 


& Example user- 
defined toolkit: 
° Hiring 
Requisition 
Toolkit (HRT) 
& Example 
system-defined 
toolkits: 
¢ UI Toolkit 
° System Data 
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As development continues, it makes sense to share assets across developers. This is where 
Toolkits fit in. 
°A toolkit is a container where artifacts can be stored for reuse by process applications or 
other toolkits. 
*You can create toolkits to enable Process Designer users to share library items across 
process applications. 
*Process applications can share library items from one or more toolkits, and toolkits can 
share library items from other toolkits. 
¢Users who have access to a toolkit can create a dependency on the toolkit and use the 
library items within it for their process development efforts. 


When a user creates a toolkit and moves items into it, all the dependent assets are also moved 
into the toolkit 
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Unit summary 


* Create tabs on a coach 

° Enhance coaches by applying a theme 
* Create a reusable View 

* Create a snapshot 

° Export your process application 

¢ Share your assets by using a toolkit 

* Conduct a Playback session 


Playback 1: Enhancing coaches © Copyright 18M Corporation 2018 
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Review questions 


1. Coaches consist of what three things? 


2. Anew process application, by default, uses the Theme. 
3. Theme support is based on open source CSS precompiler that is 
called ‘ 


4. True or False: A deployed process app can get an updated 
appearance without changing and redeploying the process app. 
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Review answers 


1. HTML, JavaScript, and CSS 
2. Classic 

3. LESS 

4. True 
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Exercise 6 


Playback 1: User interface design and 
implementation 


Playback 1: Enhancing coaches © Copyright 18M Corporation 2018 
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Exercise objectives 


After completing this exercise, you should be able to: 

* Create tabs on a coach 

° Change the appearance of a coach by applying a custom theme 
* Change the coach layout for a mobile format 

* Configure controls to respond to different screen sizes 

* Debug the coach by using a responsive sensor 
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Exercise 7 


Playback 1: Conducting the Playback session 
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Exercise objectives 


After completing this exercise, you should be able to: 

° Log on to the Process Portal and create an instance of a process 
° Demonstrate that the process follows the various paths modeled 
¢ Use Process Portal to view the state of activities in a process 

* Create a toolkit 

° Create a snapshot in the Workflow Center 

° Export the process application 
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